<template>
  <div class="web-layer">
    <div class="pannel-layout">
      <div class="title">跳转操作</div>
      <div class="cont">
        <ul>
          <li v-for="(item, index) in objList" :key="index" @click="moveCameraPos(item)">{{ item.name }}</li>
        </ul>
      </div>
      <div class="title">其他操作</div>
      <div class="cont">
        <ul>
          <li @click="changeRotation">{{ rotation ? '关闭旋转' : '开启旋转' }}</li>
          <li @click="columnChange">添加光柱</li>
          <li @click="delAllState">删除所有</li>
          <li @click="delMarkChange">删除美国标记点</li>
        </ul>
      </div>
      <div class="title">重置操作</div>
      <div class="cont">
        <ul>
          <li @click="updateEarthState">初始化数据</li>
        </ul>
      </div>
    </div>
    <scene-earth ref="earth"></scene-earth>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import SceneEarth from '@/components/scene-earth/index.vue'

export default defineComponent({
  name: 'WebGL',
  data () {
    return {
      objList: [
        { lon: 116.358976, lat: 39.803282, name: '中国', color: '#1FFBC6' },
        { lon: 139.812263, lat: 35.677294, name: '日本', color: '#A41FE8' },
        { lon: 77.198596, lat: 28.575136, name: '印度', color: '#E8BB1F' },
        { lon: -77.02238, lat: 38.900042, name: '美国', color: '#E81F56' },
        { lon: 31.266092, lat: 30.085626, name: '埃及', color: '#1FFBC6' },
        { lon: 103.813654, lat: 1.291125, name: '新加坡', color: '#E8BB1F' },
        { lon: -47.930912, lat: -15.781949, name: '巴西', color: '#A41FE8' },
        { lon: 149.130214, lat: -35.318235, name: '澳大利亚', color: '#E81F56' }
      ],
      rotation: true,
      updataState: false
    }
  },
  mounted () {
    this.$nextTick(this.initEearthState)
  },
  methods: {
    earthRef () {
      return this.$refs.earth as typeof SceneEarth
    },
    updateEarthState () {
      this.updataState && this.initEearthState()
    },
    initEearthState () {
      for (const point of this.objList) {
        this.earthRef().initMark(point)
      }
    },
    moveCameraPos (item: any) {
      this.earthRef().moveCameraPos(item)
    },
    delAllState () {
      this.updataState = true
      this.earthRef().delAllState()
    },
    delMarkChange () {
      this.earthRef().deleteMark({ name: '美国' })
    },
    columnChange () {
      for (const point of this.objList) {
        this.earthRef().initColumn(point)
      }
    },
    changeRotation () {
      const rotation = !this.rotation
      this.rotation = rotation
      this.earthRef().setRotationY(rotation)
    }
  }
})
</script>

<style scoped lang="scss">
.web-layer {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
}

.pannel-layout {
  z-index: 90;
  text-align: left;
  position: absolute;
  width: 300px;
  height: 100%;
  right: 0;
  padding: 12px;
  box-sizing: border-box;
  color: white;
  background-color: rgba(255, 255, 255, 0.2);

  .title {
    font-size: 18px;
    width: 100%;
    font-weight: bold;
  }

  .cont {
    margin: 16px 0;

    ul {
      flex-wrap: wrap;
      display: flex;
      padding: 0;
      margin-bottom: 0;

      li {
        box-sizing: border-box;
        list-style: none;
        width: 50%;
        cursor: pointer;
        font-size: 14px;
        padding: 10px 0 10px 24px;

        &:hover {
          color: aquamarine;
        }
      }
    }
  }
}
</style>
